{% extends "base.html" %}

{% block content %}
<div class="container">
    <div class="card">
        <div class="card-header">
            <h2>{{ form.title }}</h2>
            <p class="mb-0">{{ form.description }}</p>
        </div>
        <div class="card-body">
            <form method="POST">
                <div class="row">
                    {% for field in form.fields %}
                    <div class="col-md-6 mb-3">
                        <label class="form-label">
                            {{ field.label }}
                            {% if field.required %}
                            <span class="text-danger">*</span>
                            {% endif %}
                        </label>
                        
                        {% if field.type == 'text' %}
                            <input type="text" class="form-control form-control-sm" 
                                   name="{{ field.name }}" 
                                   value="{{ response.data[field.name] if response else '' }}"
                                   {% if field.required %}required{% endif %}>
                        
                        {% elif field.type == 'number' %}
                            <input type="number" class="form-control form-control-sm" 
                                   name="{{ field.name }}" 
                                   value="{{ response.data[field.name] if response else '' }}"
                                   {% if field.required %}required{% endif %}>
                        
                        {% elif field.type == 'textarea' %}
                            <textarea class="form-control form-control-sm" 
                                      name="{{ field.name }}" 
                                      rows="3"
                                      {% if field.required %}required{% endif %}>{{ response.data[field.name] if response else '' }}</textarea>
                        
                        {% elif field.type == 'date' %}
                            <input type="date" class="form-control form-control-sm" 
                                   name="{{ field.name }}" 
                                   value="{{ response.data[field.name] if response else '' }}"
                                   {% if field.required %}required{% endif %}>
                        
                        {% elif field.type == 'time' %}
                            <input type="time" class="form-control form-control-sm" 
                                   name="{{ field.name }}" 
                                   value="{{ response.data[field.name] if response else '' }}"
                                   {% if field.required %}required{% endif %}>
                        
                        {% elif field.type == 'idcard' %}
                            <input type="text" class="form-control form-control-sm" 
                                   name="{{ field.name }}" 
                                   value="{{ response.data[field.name] if response else '' }}"
                                   pattern="[1-9]\d{5}(18|19|20)\d{2}(0[1-9]|1[0-2])(0[1-9]|[12]\d|3[01])\d{3}[0-9Xx]"
                                   oninput="validateIdCard(this)"
                                   {% if field.required %}required{% endif %}>
                            <div class="invalid-feedback"></div>
                        
                        {% elif field.type == 'select' %}
                            <select class="form-select form-select-sm" 
                                   name="{{ field.name }}"
                                   {% if field.required %}required{% endif %}>
                                <option value="">请选择</option>
                                {% for option in field.options %}
                                    <option value="{{ option }}"
                                            {% if response and response.data[field.name] == option %}selected{% endif %}>
                                        {{ option }}
                                    </option>
                                {% endfor %}
                            </select>
                        
                        {% elif field.type == 'radio' %}
                            {% for option in field.options %}
                                <div class="form-check">
                                    <input class="form-check-input" type="radio" 
                                           name="{{ field.name }}" 
                                           value="{{ option }}"
                                           {% if response and response.data[field.name] == option %}checked{% endif %}
                                           {% if field.required %}required{% endif %}>
                                    <label class="form-check-label">{{ option }}</label>
                                </div>
                            {% endfor %}
                        
                        {% elif field.type == 'checkbox' %}
                            {% for option in field.options %}
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" 
                                           name="{{ field.name }}" 
                                           value="{{ option }}"
                                           {% if response and option in response.data.get(field.name, []) %}checked{% endif %}>
                                    <label class="form-check-label">{{ option }}</label>
                                </div>
                            {% endfor %}
                        {% endif %}
                    </div>
                    {% endfor %}
                </div>
                <div class="row">
                    <div class="col-12">
                        <button type="submit" class="btn btn-primary">提交</button>
                    </div>
                </div>
            </form>
        </div>
    </div>

    {% if responses %}
    <div class="card mt-4">
        <div class="card-header d-flex justify-content-between align-items-center">
            <h5 class="mb-0">历史填写记录</h5>
            <span class="badge bg-secondary">共 {{ responses|length }} 条记录</span>
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-sm table-hover">
                    <thead>
                        <tr>
                            <th style="width: 180px;">提交时间</th>
                            {% for field in form.fields %}
                            <th>{{ field.label }}</th>
                            {% endfor %}
                        </tr>
                    </thead>
                    <tbody>
                        {% for response in responses %}
                        <tr>
                            <td>{{ response.submit_time.strftime('%Y-%m-%d %H:%M:%S') }}</td>
                            {% for field in form.fields %}
                            <td>{{ response.data[field.name] }}</td>
                            {% endfor %}
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    {% endif %}
</div>
{% endblock %}

{% block script %}
<script>
  function validateIdCard(input) {
      const value = input.value;
      let errorMsg = '';
  
      // 基本格式验证
      if (!/^[1-9]\d{5}(18|19|20)\d{2}(0[1-9]|1[0-2])(0[1-9]|[12]\d|3[01])\d{3}[0-9Xx]$/.test(value)) {
          if (value.length !== 18) {
              errorMsg = '身份证号码长度必须为18位';
          } else if (!/^[1-9]/.test(value)) {
              errorMsg = '身份证号码必须以数字1-9开头';
          } else if (!/^\d{17}[\dXx]$/.test(value)) {
              errorMsg = '身份证号码前17位必须为数字，最后一位必须为数字或X';
          } else {
              errorMsg = '身份证号码格式不正确';
          }
          input.setCustomValidity(errorMsg);
          input.classList.add('is-invalid');
          input.nextElementSibling.textContent = errorMsg;
          return;
      }
  
      // 日期验证
      const year = value.substr(6, 4);
      const month = value.substr(10, 2);
      const day = value.substr(12, 2);
      const date = new Date(year, month - 1, day);
      if (date.getFullYear() != year || date.getMonth() + 1 != month || date.getDate() != day) {
          errorMsg = '身份证号中的出生日期无效';
          input.setCustomValidity(errorMsg);
          input.classList.add('is-invalid');
          input.nextElementSibling.textContent = errorMsg;
          return;
      }
  
      // 校验码验证
      const factor = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2];
      const parity = ['1', '0', 'X', '9', '8', '7', '6', '5', '4', '3', '2'];
      let sum = 0;
      
      for (let i = 0; i < 17; i++) {
          sum += parseInt(value[i]) * factor[i];
      }
      
      const check = parity[sum % 11];
      if (check.toLowerCase() !== value[17].toLowerCase()) {
          errorMsg = '身份证号码校验码错误';
          input.setCustomValidity(errorMsg);
          input.classList.add('is-invalid');
          input.nextElementSibling.textContent = errorMsg;
          return;
      }
  
      // 验证通过
      input.setCustomValidity('');
      input.classList.remove('is-invalid');
      input.nextElementSibling.textContent = '';
  }
</script>
{% endblock %} 